<script setup>
import SmtHeader from '@/layout/SmtHeader.vue';
import SmtFooter from '@/layout/SmtFooter.vue';
import DescriptionTable from '@/components/DescriptionTable/index.vue';
import { onMounted, reactive, computed, ref } from 'vue';
import { useRoute } from 'vue-router';
import { ArrowRightBold } from '@element-plus/icons-vue';
import { listAddress } from '@/server/api/biz.js';
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import { debounce } from '@/utils/common.js';
const { t } = useI18n();
import {
  getPcbInfo,
  creatPayOrder,
  updateOrderExpressAPI,
  getExpressCompanyList,
  postPcbaRefundOrder,
} from '@/server/api/biz.js';
import router from '../../../router';
const route = useRoute();

const refundVisible = ref(false);
const ruleFormRef = ref();
const batchList = ref([]);
const refundForm = ref({
  remark: '',
});

const deliveryInfo = ref({});

const refundRules = reactive({
  remark: [{ required: true, message: '退款原因不能为空', trigger: 'blur' }],
});

const data = reactive({
  addressVisible: false, // 地址选择弹窗
  addressList: [], // 收货地址列表
  expressDeliveryList: [], // 快递方式
  curAddressInfo: null, // 当前选中的快递信息
  expressDelivery: '1', // 快递方式
});

const orderDetail = ref({});

onMounted(() => {
  const { id } = route.query;
  if (id) {
    getAddressList();
    getExpressDeliveryInfo();
    getPcbOrderInfo(id);
  }
});

/**
 * 获取快订单详情信息
 */
function getPcbOrderInfo(id) {
  getPcbInfo(id).then((res) => {
    if (res.code === 200) {
      orderDetail.value = res.data;
      if (res.data.crmPcbaPcbOrder && res.data.crmPcbaPcbOrder.serviceDetail) {
        orderDetail.value.crmPcbaPcbOrder.basicService =
          res.data.crmPcbaPcbOrder.serviceDetail['1'] || []; // 基础服务
        orderDetail.value.crmPcbaPcbOrder.craftService =
          res.data.crmPcbaPcbOrder.serviceDetail['2'] || []; // 工艺服务
        orderDetail.value.crmPcbaPcbOrder.customizedService =
          res.data.crmPcbaPcbOrder.serviceDetail['3'] || []; // 定制服务
      }

      if (res.data.crmPcbaSmtOrder && res.data.crmPcbaSmtOrder.serviceDetail) {
        orderDetail.value.crmPcbaSmtOrder.basicService =
          res.data.crmPcbaSmtOrder.serviceDetail['1'] || []; // 基础服务
        orderDetail.value.crmPcbaSmtOrder.craftService =
          res.data.crmPcbaSmtOrder.serviceDetail['2'] || []; // 工艺服务
        orderDetail.value.crmPcbaSmtOrder.customizedService =
          res.data.crmPcbaSmtOrder.serviceDetail['3'] || []; // 定制服务
      }

      // 快递信息
      const { expressAddress, expressName, expressPhone, id } = res.data.crmPcbaOrderExpress;
      const [country, province, city, zone, address] = expressAddress.split('/');
      console.log(country, province, city, zone);

      data.curAddressInfo = {
        country,
        province,
        city,
        zone,
        phone: expressPhone,
        address,
        name: expressName,
        id,
      };
    } else {
      ElMessage.error(res.msg);
    }
  });
}

// 联系人信息
const contactsInfo = computed(() => {
  if (data.curAddressInfo) {
    return `${data?.curAddressInfo.name} ${data?.curAddressInfo?.phone.replace(
      /(\d{3})\d{4}(\d{4})/,
      '$1****$2',
    )}`;
    return ``;
  } else {
    return ``;
  }
});

// 地址信息
const addressInfo = computed(() => {
  if (data.curAddressInfo) {
    return `${data?.curAddressInfo?.address}`;
  } else {
    return ``;
  }
});

// 区信息
const districtInfo = computed(() => {
  if (data.curAddressInfo) {
    return `${data?.curAddressInfo?.country} ${data?.curAddressInfo?.province} ${data?.curAddressInfo?.city} ${data?.curAddressInfo?.zone}`;
  } else {
    return ``;
  }
});

/**
 *  文件下载
 */
function handleDownload(url) {
  downloadFile(url);
}

/**
 * 获取物料生产批次信息
 */
const getBatchOptionList = () => {
  queryOmsProductionMaterialBatchList().then((res) => {
    if (res.code === 200) {
      batchList.value = res.data;
    } else {
      ElMessage.error(res.msg);
    }
  });
};

// 格式化批次
const formatBatch = (value) => {
  const batchItem = batchList.value.find((item) => item.batchValue === value);
  if (!batchItem) {
    return t('mall.unlimited');
  }
  return batchItem.batchName;
};

const patchList = [
  {
    id: 1,
    name: t('home.fullSticker'),
  },
  {
    id: 2,
    name: t('home.topLevel'),
  },
  {
    id: 3,
    name: t('home.groundFloor'),
  },
];

/**
 * 获取地址列表
 */
function getAddressList() {
  const obj = {
    useType: 1,
    current: 1,
    pageSize: 10,
  };
  listAddress(obj).then((res) => {
    if (res.code === 200) {
      data.addressList = res.data;
    } else {
      ElMessage.error(res.msg);
    }
  });
}

/**
 * 获取快递公司列表
 */
function getExpressDeliveryInfo() {
  getExpressCompanyList().then((res) => {
    if (res.code === 200) {
      data.expressDeliveryList = res.data;
    } else {
      ElMessage.error(res.msg);
    }
  });
}

/**
 * 编辑地址
 */
const handleEditAddress = () => {
  data.addressVisible = true;
};

/**
 *  选中地址
 */
const handleSelectedAddress = (info) => {
  const pcbaOrderId = route.query.id;
  // 修改订单地址， 关联订单
  const { country, province, city, zone, address, name: expressName, phone: expressPhone } = info;
  // 快递地址
  const expressAddress = [country, province, city, zone, address].join('/');
  console.log(data.curAddressInfo);
  updateOrderExpressAPI({
    ...data.curAddressInfo,
    expressAddress,
    expressName,
    expressPhone,
    pcbaOrderId,
    expressType: 1, // 快递方式 1货到付款，2厂家代付
  }).then((res) => {
    if (res.code === 200) {
      ElMessage.success(t('mall.shipping_info_update_success'));
      data.curAddressInfo.country = info.country;
      data.curAddressInfo.province = info.province;
      data.curAddressInfo.city = info.city;
      data.curAddressInfo.zone = info.zone;
      data.curAddressInfo.address = info.address;
      data.curAddressInfo.name = info.name;
      data.curAddressInfo.phone = info.phone;

      data.addressVisible = false;
    } else {
      ElMessage.error(t('mall.operation_failed'));
    }
  });
};

/**
 * 支付防抖
 */
const debouncedeSubmitPayment = debounce(() => {
  handleSubmitPayment();
}, 500); // 设置延迟时间，单位为毫秒

/**
 * 支付
 */
const handleSubmitPayment = () => {
  const pcbaOrderId = route.query.id;

  creatPayOrder({
    payType: 1,
    pcbaOrderId,
  }).then((res) => {
    if (res.code === 200) {
      let tabs = null;
      if (orderDetail.value?.crmPcbaPcbOrder) {
        tabs = 1;
      }
      if (orderDetail.value.orderCategory === 2) {
        tabs = 0;
      }

      localStorage.setItem(
        'orderInfo',
        JSON.stringify({
          id: res.data.id,
          payOrderId: res.data.payOrderId,
          pcbaOrderId: res.data.pcbaOrderId,
          tabs,
        }),
      );
      getPayUrl(res.data);
    }
  });
};

/**
 * 获取支付链接
 */
const getPayUrl = (data) => {
  data.links.forEach((item) => {
    if (item.rel == 'approve') {
      window.location.href = item.href;
    }
  });
};

// 打开退款弹窗
const openRefundDialog = () => {
  if (orderDetail.value.crmPcbaPcbOrder.bindOtherSmtOrder === 1) {
    ElMessageBox.alert(
      t('mall.refund_failed_due_to_association', {
        name: orderDetail.value.crmPcbaPcbOrder.bindSerialOrder,
      }),
      t('om.Prompts'),
      {
        confirmButtonText: 'OK',
      },
    );
    return;
  }
  refundVisible.value = true;
};

// 确认退款
const confirmRefund = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const { code } = await postPcbaRefundOrder({
        pcbaOrderId: orderDetail.value.id,
        remark: refundForm.value.remark,
      });
      if (code === 200) {
        ElMessage.success(t('mall.application_successful'));
        closeRefund();
        const { id } = route.query;
        // 刷新订单详情
        getPcbOrderInfo(id);
      }
    }
  });
};

const closeRefund = () => {
  refundVisible.value = false;
  ruleFormRef.value.resetFields();
};

// 跳去订单管理页
const toOrderAdmin = () => {
  router.push({ path: '/order', query: { type: 0 } });
};
</script>
<template>
  <!-- 头部 -->
  <smt-header></smt-header>
  <div class="wrapper">
    <div class="settlement container">
      <div class="breadcrumb-wrap" style="margin-bottom: 20px">
        <el-breadcrumb :separator-icon="ArrowRight" class="f-28">
          <el-breadcrumb-item :to="{ path: '/' }">{{ $t('menu.home') }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $t('mall.place_order') }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $t('mall.order_settlement') }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- <div class="step-wrap">
        <OrderStep :stepList="orderProgressList" :active="orderDetail.orderProgress" />
      </div> -->
      <!-- PCB信息  -->
      <div class="block-container" v-if="orderDetail?.crmPcbaPcbOrder">
        <div class="title-section">
          <p class="title">{{ $t('smt.PCBInfo') }}</p>
        </div>
        <div class="content-wrap border">
          <el-descriptions :column="5">
            <el-descriptions-item :label="`${$t('mall.material_category')}:`">{{
              orderDetail?.crmPcbaPcbOrder?.productName
            }}</el-descriptions-item>
            <el-descriptions-item :label="`${$t('pcb.BoardSize')}:`"
              >{{
                `${orderDetail.crmPcbaPcbOrder.pcbWidth} * ${orderDetail.crmPcbaPcbOrder.pcbWidth}`
              }}cm</el-descriptions-item
            >
            <el-descriptions-item :label="`${$t('om.Platelayer')}`">{{
              orderDetail.crmPcbaPcbOrder.pcbLayer
            }}</el-descriptions-item>
            <el-descriptions-item :label="`${$t('home.boardSum')}:`"
              >{{ orderDetail.crmPcbaPcbOrder.orderPcbNumber }}Pcs</el-descriptions-item
            >
          </el-descriptions>
        </div>
        <!-- 工艺信息 -->
        <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder?.craftsDetail">
          <description-table
            :header="$t('mall.process_information')"
            :propsConfig="{
              label: 'craftsName',
              value: 'craftsDetailName',
            }"
            :data="orderDetail.crmPcbaPcbOrder?.craftsDetail"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder?.craftsDetail">
          <div class="description-head">
            <p class="description-title">{{$t('mall.process_information')}}</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaPcbOrder?.craftsDetail"
              :key="index"
              :label="item.craftsName"
              >{{ item.craftsDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->

        <!-- 基础服务 -->
        <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder?.basicService">
          <description-table
            :header="$t('smt.Basicservices')"
            :propsConfig="{
              label: 'serviceName',
              value: 'serviceDetailName',
            }"
            :data="orderDetail.crmPcbaPcbOrder?.basicService"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder?.basicService">
          <div class="description-head">
            <p class="description-title">基础服务</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaPcbOrder?.basicService"
              :key="index"
              :label="item.serviceName"
              >{{ item.serviceDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->

        <!-- 工艺服务 -->
        <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder?.craftService">
          <description-table
            :header="$t('mall.process_service')"
            :propsConfig="{
              label: 'serviceName',
              value: 'serviceDetailName',
            }"
            :data="orderDetail.crmPcbaPcbOrder?.craftService"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder.craftService">
          <div class="description-head">
            <p class="description-title">{{$t('mall.process_service')}}</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaPcbOrder.craftService"
              :key="index"
              :label="item.serviceName"
              >{{ item.serviceDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->

        <!-- 定制服务 -->
        <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder?.customizedService">
          <description-table
            :header="$t('smt.Customizedservices')"
            :propsConfig="{
              label: 'serviceName',
              value: 'serviceDetailName',
            }"
            :data="orderDetail.crmPcbaPcbOrder?.customizedService"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaPcbOrder.customizedService">
          <div class="description-head">
            <p class="description-title">定制服务</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaPcbOrder.customizedService"
              :key="index"
              :label="item.serviceName"
              >{{ item.serviceDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div>
      </div> -->
      </div>

      <!-- SMT信息  -->
      <div class="block-container" v-if="orderDetail.orderCategory === 2">
        <div class="title-section">
          <p class="title">{{ $t('smt.SMTInfo') }}</p>
        </div>
        <div class="content-wrap border">
          <el-descriptions :column="5">
            <el-descriptions-item :label="$t('smt.chipLayer')">{{
              patchList[0].name
            }}</el-descriptions-item>
            <el-descriptions-item :label="`${$t('mall.smt_quantity')}:`"
              >{{ orderDetail.crmPcbaSmtOrder.smtNumber }} PCS</el-descriptions-item
            >
            <el-descriptions-item :label="`${$t('mall.accept_alternative_components')}:`">
              {{
                orderDetail.crmPcbaSmtOrder.isUseAlternative === 1
                  ? $t('mall.accept')
                  : $t('mall.do_not_accept')
              }}
            </el-descriptions-item>
            <el-descriptions-item :label="`${t('mall.accept_the_batch')}:`">
              {{ formatBatch(orderDetail.crmPcbaSmtOrder.batchYearLimit) }}
            </el-descriptions-item>
            <el-descriptions-item :label="`${t('smt.BOMFile')}:`">
              <el-link
                type="primary"
                @click="handleDownload(orderDetail?.crmPcbaSmtOrder.bomVO?.filePath)"
                >{{ orderDetail?.crmPcbaSmtOrder?.bomVO?.fileName }}</el-link
              >
            </el-descriptions-item>
            <el-descriptions-item :label="`${$t('smt.Coordinatefile')}:`">
              {{ orderDetail.or }}
              <el-link
                type="primary"
                @click="handleDownload(orderDetail?.crmPcbaSmtOrder?.coordinateFileVO?.filePath)"
                >{{ orderDetail?.crmPcbaSmtOrder?.coordinateFileVO?.fileName }}</el-link
              >
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 工艺信息 -->
        <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder?.craftsDetail">
          <description-table
            :header="$t('mall.process_information')"
            :data="orderDetail.crmPcbaSmtOrder?.craftsDetail"
            :propsConfig="{
              label: 'craftsName',
              value: 'craftsDetailName',
            }"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder?.craftsDetail">
          <div class="description-head">
            <p class="description-title">{{$t('mall.process_information')}}</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaSmtOrder?.craftsDetail"
              :key="index"
              :label="item.craftsName"
              >{{ item.craftsDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->

        <!-- 基础服务 -->
        <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder?.basicService">
          <description-table
            :header="$t('smt.Basicservices')"
            :data="orderDetail.crmPcbaSmtOrder?.basicService"
            :propsConfig="{
              label: 'serviceName',
              value: 'serviceDetailName',
            }"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder?.basicService">
          <div class="description-head">
            <p class="description-title">基础服务</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaSmtOrder?.basicService"
              :key="index"
              :label="item.serviceName"
              >{{ item.serviceDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->

        <!-- 工艺服务 -->
        <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder?.craftService">
          <description-table
            :header="$t('mall.process_service')"
            :data="orderDetail.crmPcbaSmtOrder?.craftService"
            :propsConfig="{
              label: 'serviceName',
              value: 'serviceDetailName',
            }"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder.craftService">
          <div class="description-head">
            <p class="description-title">{{$t('mall.process_service')}}</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaSmtOrder.craftService"
              :key="index"
              :label="item.serviceName"
              >{{ item.serviceDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->

        <!-- 定制服务 -->
        <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder?.customizedService">
          <description-table
            :header="$t('smt.Customizedservices')"
            :data="orderDetail.crmPcbaSmtOrder?.customizedService"
            :propsConfig="{
              label: 'serviceName',
              value: 'serviceDetailName',
            }"
          />
        </div>
        <!-- <div class="description-wrap" v-if="orderDetail.crmPcbaSmtOrder.customizedService">
          <div class="description-head">
            <p class="description-title">定制服务</p>
          </div>
          <el-descriptions :column="4" border>
            <el-descriptions-item
              v-for="(item, index) in orderDetail.crmPcbaSmtOrder.customizedService"
              :key="index"
              :label="item.serviceName"
              >{{ item.serviceDetailName }}</el-descriptions-item
            >
          </el-descriptions>
        </div> -->
      </div>
      <!-- 收货信息  -->
      <div class="block-container">
        <div class="title-section">
          <p class="title">{{ $t('mall.shipping_information') }}</p>
        </div>

        <div class="content-wrap">
          <div class="address-container" @click="handleEditAddress" v-if="data.curAddressInfo">
            <div class="address-info">
              <p class="district">
                {{ districtInfo
                }}<el-tag class="default-tag" type="primary">{{ $t('mall.default') }}</el-tag>
              </p>
              <p class="address">{{ addressInfo }}</p>
              <p class="contacts">{{ contactsInfo }}</p>
            </div>
            <div style="margin-right: 70px">
              <el-button type="primary" size="small" :icon="Edit">{{
                $t('mall.change_address')
              }}</el-button>
            </div>
          </div>
          <div v-else>
            <el-button type="primary" @click="handleEditAddress">选择收货地址</el-button>
          </div>
        </div>
      </div>

      <!-- 快递方式  -->
      <!-- <div class="block-container">
        <div class="title-section">
          <p class="title">快递方式</p>
        </div>
        <div class="content-wrap">
          <el-radio-group v-model="orderDetail.expressDelivery">
            <el-radio
              v-for="(item, index) in data.expressDeliveryList"
              :key="index"
              :label="item.id"
              @change="handleExpressDeliveryChange(item)"
              >{{ item.name }}</el-radio
            >
          </el-radio-group>
        </div>
      </div> -->
      <div class="block-container">
        <div class="title-section">
          <p class="title">{{ $t('smt.Expressway') }}</p>
        </div>
        <div class="content-wrap">
          <el-form-item :label="`${$t('smt.Expressway')}:`"
            >{{ $t('mall.cash_on_delivery') }}
          </el-form-item>
        </div>
      </div>

      <!-- 付款方式  -->
      <div class="block-container">
        <div class="title-section">
          <p class="title">{{ $t('mall.payment_method') }}</p>
        </div>
        <div class="content-wrap">
          <el-form-item :label="`${$t('mall.payment_method')}:`"> PayPal </el-form-item>
        </div>
      </div>
      <!-- 订单信息 -->
      <div class="order-table-wrap">
        <div class="table-head">
          <div class="head-item">{{ $t('mall.delivery_and_shipping') }}</div>
          <div class="head-item">{{ $t('mall.price_and_costs') }}</div>
        </div>
        <el-descriptions :column="2" border>
          <el-descriptions-item :label="`${$t('mall.delivery_time')}:`"
            ><span class="content">
              <span v-if="orderDetail.deliveryDay" class="content"
                >{{ `${orderDetail.deliveryDay} - ${orderDetail.deliveryDay + 3} `
                }}{{ $t('mall.days') }}</span
              >
            </span></el-descriptions-item
          >
          <el-descriptions-item :label="`${$t('mall.pcb_cost')}:`"
            ><span class="content amount"
              >{{ orderDetail.symbol || '$'
              }}{{
                orderDetail.pcbAmount > 0
                  ? Math.round((orderDetail.pcbAmount / orderDetail.exchangeRmbRate) * 100) / 100
                  : 0
              }}</span
            ></el-descriptions-item
          >
          <el-descriptions-item :label="`${$t('mall.express_delivery')}:`"
            ><span class="content">{{
              $t('mall.based_on_actual_time')
            }}</span></el-descriptions-item
          >
          <el-descriptions-item :label="`${$t('mall.smt_cost')}:`"
            ><span class="content amount"
              >{{ orderDetail.symbol || '$'
              }}{{
                orderDetail.smtAmount > 0
                  ? Math.round((orderDetail.smtAmount / orderDetail.exchangeRmbRate) * 100) / 100
                  : 0
              }}</span
            ></el-descriptions-item
          >
          <el-descriptions-item :label="`${$t('mall.shipping_time')}:`"
            ><span class="content">{{
              $t('mall.based_on_actual_time')
            }}</span></el-descriptions-item
          >
          <el-descriptions-item :label="`${$t('mall.logistics_fee')}:`"
            ><span class="content">{{
              $t('mall.based_on_actual_costs')
            }}</span></el-descriptions-item
          >
          <el-descriptions-item></el-descriptions-item>
          <el-descriptions-item :label="`${$t('mall.tax_fee')}:`"
            ><span class="content amount">
              {{ orderDetail.symbol || '$'
              }}{{ Number(orderDetail.taxAmount).toFixed(2) || 0 }}</span
            ></el-descriptions-item
          >
        </el-descriptions>
        <div class="table-footer">
          <p>
            <label class="title">{{ $t('mall.estimated_cost') }}</label
            ><span class="amount"
              >{{ orderDetail.symbol || '$'
              }}{{ Number(orderDetail.payCurrencyTaxAmount).toFixed(2) }}</span
            >
          </p>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="btn-wrap">
        <el-button plain @click="toOrderAdmin">{{ $t('mall.previous_step') }}</el-button>
        <el-button
          v-if="[2].includes(orderDetail.orderStatus)"
          type="primary"
          @click="debouncedeSubmitPayment()"
          :disabled="disabledPay"
          >{{ $t('mall.payment') }}</el-button
        >
        <el-button
          type="danger"
          @click="openRefundDialog"
          v-if="[3, 4, 5, 6, 7].includes(orderDetail.orderStatus)"
          >确认退款</el-button
        >
      </div>
    </div>
    <!-- 收货地址弹窗 -->
    <SelectAddressDialog
      v-model="data.addressVisible"
      title="收货地址"
      :addressList="data.addressList"
      @getAddressList="getAddressList"
      @selected="handleSelectedAddress"
    />
  </div>
  <!-- 底部 -->
  <smt-footer></smt-footer>

  <!-- 退款弹窗 -->
  <el-dialog
    v-model="refundVisible"
    title="确认退款"
    width="500"
    :close-on-click-modal="false"
    @close="closeRefund"
  >
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="refundForm"
      :rules="refundRules"
      label-width="auto"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="退款原因:" prop="remark">
        <el-input v-model="refundForm.remark" placeholder="请输入退款原因" />
      </el-form-item>
      <el-form-item label="退款方式:" prop="method"> PayPal </el-form-item>
      <el-form-item label="退款金额:" prop="money">
        <span style="color: #ff0000; font-weight: bold">
          ${{ orderDetail.payCurrencyTaxAmount }}
        </span>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeRefund">{{ $t('smt.Cancel') }}</el-button>
        <el-button type="primary" @click="confirmRefund(ruleFormRef)"> 提交申请 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.wrapper {
  padding: 12px 0 72px;
  background: #f5f5f5;
  .settlement {
    padding: 28px 20px;
    border-radius: 8px;
    background: #fff;
    &.container {
      width: 1440px;
      margin: 0 auto;
    }

    .step-wrap {
      display: flex;
      justify-content: center;
      padding: 20px 0;
    }

    .page-title {
      padding: 0 24px;
      color: var(--mall-text-color-primary);
      font-size: 20px;
      font-weight: 700;
    }
    .block-container {
      padding-bottom: 20px;
      .title-section {
        display: flex;
        align-items: center;
        padding: 0 30px;
        height: 40px;
        border-radius: 5px;
        border: 1px solid #d9d9d9;
        background: #f5f5f5;
        color: #383838;
        font-size: 14px;
        font-weight: 400;
      }

      .content-wrap {
        padding: 20px 30px 8px;
        &.border {
          border-bottom: 1px solid #d9d9d9;
        }
      }

      .description-wrap {
        margin-bottom: 16px;
        .description-head {
          border: 1px solid #d9d9d9;
          padding: 0 20px;
          border-bottom: none;
          height: 35px;
          line-height: 35px;
          background: #fafafa;
          .description-title {
            color: #383838;
            font-size: 14px;
          }
        }
      }

      .address-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 384px;
        .address-info {
          color: #686868;
          font-size: 12px;
          font-weight: 400;
          .default-tag {
            margin-left: 14px;
          }
          .address {
            padding: 10px 0;
            color: #383838;
            font-size: 14px;
          }
          .contacts {
            color: #888888;
          }
        }
      }
    }

    .order-table-wrap {
      .table-head {
        display: flex;
        align-items: center;
        height: 40px;
        line-height: 40px;
        border: 1px solid #d9d9d9;
        border-bottom: none;
        background: #f5f5f5;
        .head-item {
          flex: 1;
          text-align: center;
          &:first-child {
            position: relative;
            &:after {
              content: '';
              position: absolute;
              right: 3px;
              height: 40px;
              width: 1px;
              background: #d9d9d9;
            }
          }
        }
      }

      .table-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        line-height: 40px;
        border: 1px solid #d9d9d9;
        border-top: none;
        font-size: 16px;
        font-weight: 700;
        font-family: 'SourceHanSansCN';
        .title {
          color: #000000;
          padding-right: 5px;
        }
      }

      ::v-deep .el-descriptions__body {
        --el-descriptions-item-bordered-label-background: transparent !important;
      }
    }

    .amount {
      color: #ff0000;
    }

    .btn-wrap {
      display: flex;
      justify-content: center;
      padding: 30px;
    }
  }
  ::v-deep .el-descriptions__body {
    --el-descriptions-table-border: 1px solid #d9d9d9 !important;
    --el-descriptions-item-bordered-label-background: #fafafa;
  }
}
</style>
